<template>
<!-- 党组织活动页面 -->
  <div class="activeList">
      <el-button type="primary" v-show="showaddButton" class="builtactive" @click="Addactive">新建活动</el-button>
      <el-table class="activetable" :data="activityList.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="560" border>
        <el-table-column
          prop="theme"
          label="活动主题">
        </el-table-column>
        <!-- <el-table-column
          prop="createUserName"
          label="发起人">
        </el-table-column> -->
        <el-table-column
          prop="compereName"
          label="主持人">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述" tooltip-effect="is-light"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地点">
        </el-table-column>
        <el-table-column
          prop="contactsUserName"
          label="联系人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="holdTime"
          label="开始时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="完成时间">
        </el-table-column>
        <el-table-column prop="" width="226" label="操作">
          <template slot-scope="scope">
            <el-button  @click="activeDues(scope.row.id)">查看详情</el-button>
            <!-- <i class="el-icon-view information" @click="activeDues(scope.row.id)"></i> -->
            <el-button type="primary" @click="complete(scope.row.id)" :disabled="scope.row.isDisable" plain>完成活动</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="status"
          label="状态">
        </el-table-column> -->
        <!-- <el-table-column prop="status">
        </el-table-column> -->
      </el-table>
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
      <activeAdd @activeList="activeList" ref="activeAdd" v-show="showAdd"></activeAdd>
      <showactive ref="actshow" v-show="showactUserlist"></showactive>
  </div>
</template>

<script>
// import axios from "axios"
import showactive from "./activeShow.vue"
import activeAdd from "./activeAdd.vue"
export default {
  components:{
    activeAdd,showactive
  },
  data(){
    return{
      activityList:[],//活动列表
      showAdd:false,//是否显示新增活动弹窗
      showaddButton:true,//是否显示新建活动按钮;普通用户不显示
      total:0,
      currentPage: 1,
      pageSize:6,
      showactUserlist:false,//是否显示查看活动详情弹框
      isPresent:"",//
    }
  },
  mounted(){
    this.activeList()
    var authority = JSON.parse(localStorage.getItem('userinfo'))
    if(authority.authority.length==0||authority.authority[0].authority == "dc"){
      this.showaddButton = false
    }
  },
  methods:{
    activeList(){//获取活动列表
    // console.log("调用刷新")
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/activity/getActivityList?pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
        // url:"/activity/getActivityList",
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.activityList = res.data.data.list
        this.total = res.data.data.totals
        // console.log(this.activityList)
        this.activityList.forEach(item=>{
          if(item.holdTime!=null){// 截取活动举办时间
            item.holdTime = item.holdTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
          }
          if(item.createTime!=null){// 截取创建时间时间
            item.createTime = item.createTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
          }
          if(item.endTime != null){//截取结束时间
            item.endTime = item.endTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
            // 向数组中添加字段控制是否禁用按钮
            item.isDisable = true
          }
          else{
            item.isDisable = false
          }
        })
      })
    },
    payerList(){//用户信息树状图
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:"/user/getUserTree",
      }).then(res=>{
        // console.log(res)
      })
    },
    complete(id){//点击完成活动按钮id:活动id
      this.$confirm("确定要完成本次活动吗？",'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.axios({
          headers:{'Authentication':localStorage.getItem('token')},
          method:"put",
          url:`/activity/completeActivity?activityId=${id}`,
        }).then(res=>{
          if(res.data.code != 20001){
            return this.$message.error(res.data.msg)
          }
          this.activeList()
          this.$message({
          type: 'success',
          message: '已完成活动'
        });  
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    Addactive(){//点击新增活动按钮
      this.showAdd = true
      this.$nextTick(() => {
        this.$refs.activeAdd.init()
      })
    },
    handleCurrentChange(val){//点击获取页码
      this.currentPage = val
      this.activeList()
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.currentPage = 1
    },
    activeDues(id){//点击查看
      this.showactUserlist = true
        this.$nextTick(()=>{
          this.$refs.actshow.init(id)
      })
    }
  }
}
</script>

<style lang="scss">
  .builtactive{

  }
  .activetable{
    margin-top: 2vh;
    .information{
            cursor: pointer;
        }
        .information:hover{
            color: salmon;
        }
  }
  .has-gutter{
        th{
            text-align: center;
        }
    }
    .el-table__body{
        .el-table__row{
            td{
                text-align: center;
            }
        }
    }
  .activeList{
    .paginationBlock{
      position: absolute;
      bottom: 6vh;
      left: 0;
      width: 100%;
      // border: 1px solid #000;
    }
    .el-pagination{
      text-align: center;
    }
    .el-pager li{
      background: none;
    }
    .btn-next,.btn-prev{
      background: none;
    }
  }
</style>